<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选全不选的第二种写法</title>

    <script type="text/javascript">
        window.onload = function () {

            var checkAll = document.getElementById("checkAll");
            var hobby = document.getElementsByName("hobby");
            // 全选，绑定事件
            checkAll.onclick = function () {

                for (var i = 0; i < hobby.length; i++) {
                    hobby[i].checked = checkAll.checked;
                }
            }

            // 子元素
            var length = hobby.length;
            // 页面加载完成后此循环用来获取每一个"hobby"按钮
            for (var i = 0; i < length; i++) {
                // 当"hobby"按钮触发点击时间时执行以下函数
                hobby[i].onclick = function () {      //第一个hobby
                    // 定义一个计数变量
                    var count = 0;
                    // 点击事件触发后执行此循环
                    for (var i = 0; i < length; i++) {
                        // 如果有一个"hobby"复选框被选中，count计数加一   length=3
                        if (hobby[i].checked == true) {
                            count++;
                        }

                    }
                    /* 当"hobby"复选框被选中数量和"hobby"复选框总数量相同时，
                    将返回的值true赋值给全选按钮，反之亦然 */
                    checkAll.checked = (count == length);

                }

            }
        }
    </script>

</head>
<body>


<input type="checkbox" name="hobby" id="smoke"/>抽烟<br/>

<input type="checkbox" name="hobby" id="drink"/>喝酒<br/>

<input type="checkbox" name="hobby" id="perm"/>烫头

<hr/>

<input type="checkbox" name="checkAll" id="checkAll"/>全选<br/>


</body>
</html>